<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>TAO | CRM 管理</title>

    <link rel="stylesheet" href="/static/css/backend-plugin.min.css">
    <link rel="stylesheet" href="/static/css/backend.css">
</head>
<body class="  ">
<!-- loader Start -->
<div id="loading">
    <div id="loading-center">
    </div>
</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <div class="iq-sidebar  sidebar-default  ">
        <div class="iq-sidebar-logo d-flex align-items-end justify-content-between">
            <a href="" class="header-logo">
                <img src="/static/picture/logo.png" class="img-fluid rounded-normal light-logo" alt="logo">
                <img src="/static/picture/logo-dark.png" class="img-fluid rounded-normal d-none sidebar-light-img"
                     alt="logo">
                <span>TAO</span>
            </a>
            <div class="side-menu-bt-sidebar-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="text-light wrapper-menu" width="30" fill="none"
                     viewbox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                          d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </div>
        </div>
        <div class="data-scrollbar" data-scroll="1">
            <nav class="iq-sidebar-menu">
                <ul id="iq-sidebar-toggle" class="side-menu">
                    <li class="active sidebar-layout">
                        <a href="/page/main" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
                                </svg>
                            </i>
                            <span class="ml-2">主页</span>
                            <p class="mb-0 w-10 badge badge-pill badge-primary">99+</p>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2 ">
                        <span class="text-uppercase small font-weight-bold">客户管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customer" class="svg-icon ">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">基本信息</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/lostCustomer" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">流失客户管理</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">用户</span>
                    </li>
                    <li class="sidebar-layout">
                        <a href="#app1" class="collapsed svg-icon" data-toggle="collapse" aria-expanded="false">
                            <i>
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
                                </svg>
                            </i>
                            <span class="ml-2">用户管理</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon iq-arrow-right arrow-active"
                                 width="15" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                        <ul id="app1" class="submenu collapse" data-parent="#iq-sidebar-toggle">
                            <li class=" sidebar-layout">
                                <a href="/page/contactChange" class="svg-icon">
                                    <i class="">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none"
                                             viewbox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                  d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                        </svg>
                                    </i><span class="">修改密码</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">营销管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/marking" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">营销机会管理</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/customerPlan" class="svg-icon">
                            <i class="">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" fill="none" viewbox="0 0 24 24"
                                     stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5"></path>
                                </svg>
                            </i>
                            <span class="ml-2">客户开发计划</span>
                        </a>
                    </li>
                    <li class="px-3 pt-3 pb-2">
                        <span class="text-uppercase small font-weight-bold">服务管理</span>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/service" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">服务创建</span>
                        </a>
                    </li>
                    <li class=" sidebar-layout">
                        <a href="/page/bill" class="svg-icon">
                            <i class="">
                                <svg class="svg-icon" id="iq-chart-1" width="18" xmlns="http://www.w3.org/2000/svg"
                                     fill="none" viewbox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M8 13v-1m4 1v-3m4 3V8M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"
                                          style="stroke-dasharray: 96, 116; stroke-dashoffset: 0;"></path>
                                </svg>
                            </i>
                            <span class="ml-2">订单创建</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div class="pt-5 pb-5"></div>
        </div>
    </div>
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <nav class="navbar navbar-expand-lg navbar-light p-0">
                <div class="side-menu-bt-sidebar">
                    <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary wrapper-menu" width="30" fill="none"
                         viewbox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                </div>
                <div class="d-flex align-items-center">
                    <div class="change-mode">
                        <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                            <div class="custom-switch-inner">
                                <p class="mb-0"></p>
                                <input type="checkbox" class="custom-control-input" id="dark-mode" data-active="true">
                                <label class="custom-control-label" for="dark-mode" data-mode="toggle">
	                                    <span class="switch-icon-right">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-moon" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
	                                        </svg>
	                                    </span>
                                    <span class="switch-icon-left">
	                                        <svg xmlns="http://www.w3.org/2000/svg" id="h-sun" height="20" width="20"
                                                 class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
	                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                      d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
	                                        </svg>
	                                    </span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div>HI!<a href="/page/contactChange">{{ .UserName }}</a></div>
                    <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-label="Toggle navigation">
                        <svg xmlns="http://www.w3.org/2000/svg" class="text-secondary" width="30" fill="none"
                             viewbox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 6h16M4 12h16m-7 6h7"></path>
                        </svg>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list align-items-center">
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <div class="content-page">
        <div class="container-fluid">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12 mb-3 d-flex justify-content-between">
                        <h4 class="font-weight-bold d-flex align-items-center">订单</h4>
                    </div>
                </div>
                <div class="row" id="app_o">
                    <div class="col-lg-4">
                        <div class="card" v-model="serviceView">
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div>
                                        <ul class="list-style-1 mb-0">
                                            <li class="list-item d-flex justify-content-start align-items-center">
                                                <div class="list-style-detail ml-4 mr-2">
                                                    <h5 class="font-weight-bold">^{ serviceView.serviceName }</h5>
                                                    <div class="modal fade" id="exampleModalScrollable" tabindex="-1"
                                                         v-if="modalStatus === 0"
                                                         role="dialog" aria-labelledby="exampleModalScrollableTitle"
                                                         aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-scrollable"
                                                             role="document">
                                                            <div class="modal-content">
                                                                <form>
                                                                    <div class="modal-header">
                                                                        <h5 class="modal-title"
                                                                            id="exampleModalScrollableTitle">
                                                                            新建订单</h5>
                                                                        <button type="button" class="close"
                                                                                data-dismiss="modal" aria-label="Close">
                                                                            <span aria-hidden="true">&times;</span>
                                                                        </button>
                                                                    </div>
                                                                    <div class="modal-body">
                                                                        <div>
                                                                            <div class="form-group">
                                                                                <label for="exampleInputText1">订单名称</label>
                                                                                <input type="text" class="form-control"
                                                                                       v-model="orderInput.orderName"
                                                                                       id="exampleInputText1"
                                                                                       placeholder="服务名">
                                                                            </div>
                                                                            <div class="form-group">
                                                                                <label for="exampleInputText1">订单资金</label>
                                                                                <input type="text" class="form-control"
                                                                                       v-model="orderInput.orderBudget"
                                                                                       id="exampleInputText1"
                                                                                       placeholder="服务资金">
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-secondary"
                                                                                data-dismiss="modal">Close
                                                                        </button>
                                                                        <button type="button" class="btn btn-primary"
                                                                                @click="submit"
                                                                                data-dismiss="modal">Save
                                                                            changes
                                                                        </button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <table class="table table-borderless mb-0">
                                        <tr>
                                            <td class="p-0">
                                                <p class="mb-0 text-muted">服务评分</p>
                                            </td>
                                            <td>
                                                <p class="mb-0 ">^{ serviceView.serviceScore }</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="p-0">
                                                <p class="mb-0 text-muted">服务评价</p>
                                            </td>
                                            <td>
                                                <p class="mb-0 ">^{ serviceView.serviceAssessment }</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="p-0">
                                                <p class="mb-0 text-muted">服务资金</p>
                                            </td>
                                            <td>
                                                <p class="mb-0 ">￥^{ serviceView.serviceBudget }</p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="p-0">
                                                <p class="mb-0 text-muted">服务状态</p>
                                            </td>
                                            <td>
                                                <div v-if="serviceView.serviceStatus === 0">
                                                    <p class="mb-0 text-nostart d-flex justify-content-start align-items-center">
                                                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                             width="18" viewbox="0 0 24 24" fill="none">
                                                            <circle cx="12" cy="12" r="8" fill="#808080"></circle>
                                                        </svg>
                                                        未开始
                                                    </p>
                                                </div>
                                                <div v-if="serviceView.serviceStatus === 1">
                                                    <p class="mb-0 text-start d-flex justify-content-start align-items-center">
                                                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                             width="18" viewbox="0 0 24 24" fill="none">
                                                            <circle cx="12" cy="12" r="8" fill="#00bfff"></circle>
                                                        </svg>
                                                        已开始
                                                    </p>
                                                </div>
                                                <div v-if="serviceView.serviceStatus === 2">
                                                    <p class="mb-0 text-warning d-flex justify-content-start align-items-center">
                                                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                             width="18" viewbox="0 0 24 24" fill="none">
                                                            <circle cx="12" cy="12" r="8" fill="#db7e06"></circle>
                                                        </svg>
                                                        进行中
                                                    </p>
                                                </div>
                                                <div v-if="serviceView.serviceStatus === 3">
                                                    <p class="mb-0 text-success d-flex justify-content-start align-items-center">
                                                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                             width="18" viewbox="0 0 24 24" fill="none">
                                                            <circle cx="12" cy="12" r="8" fill="#3cb72c"></circle>
                                                        </svg>
                                                        已完成
                                                    </p>
                                                </div>
                                                <div v-if="serviceView.serviceStatus === -1">
                                                    <p class="mb-0 text-danger d-flex justify-content-start align-items-center">
                                                        <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                             width="18" viewbox="0 0 24 24" fill="none">
                                                            <circle cx="12" cy="12" r="8" fill="#f42b3d"></circle>
                                                        </svg>
                                                        中断
                                                    </p>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="card">
                            <div class="card-body p-0">
                                <div class="tab-content">
                                    <div id="invoice" class="tab-pane fade show active">
                                        <div class="d-flex justify-content-between align-items-center p-3">
                                            <h5>基本订单信息</h5>
                                            <button type="button" class="btn btn-primary mt-2" data-toggle="modal"
                                                    @click=""
                                                    data-target="#exampleModalScrollable">
                                                新建订单
                                            </button>
                                        </div>
                                        <div class="table-responsive">
                                            <table class="table data-table mb-0">
                                                <thead class="table-color-heading">
                                                <tr class="text-muted">
                                                    <th scope="col">订单ID</th>
                                                    <th scope="col">订单</th>
                                                    <th scope="col">订单开始日期</th>
                                                    <th scope="col">订单状态</th>
                                                    <th scope="col" class="text-right">订单预算</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr v-for="order_i in orders">
                                                    <td>^{ order_i.orderID }</td>
                                                    <td>^{ order_i.orderName }</td>
                                                    <td>
                                                        ^{ order_i.orderStartTime }
                                                    </td>
                                                    <td>
                                                        <div v-if="order_i.orderStatus === 1">
                                                            <p class="mb-0 text-start d-flex justify-content-start align-items-center">
                                                                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                                     width="18" viewbox="0 0 24 24" fill="none">
                                                                    <circle cx="12" cy="12" r="8"
                                                                            fill="#00bfff"></circle>
                                                                </svg>
                                                                创建
                                                            </p>
                                                        </div>
                                                        <div v-if="order_i.orderStatus === 2">
                                                            <p class="mb-0 text-warning d-flex justify-content-start align-items-center">
                                                                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                                     width="18" viewbox="0 0 24 24" fill="none">
                                                                    <circle cx="12" cy="12" r="8"
                                                                            fill="#db7e06"></circle>
                                                                </svg>
                                                                进行中
                                                            </p>
                                                        </div>
                                                        <div v-if="order_i.orderStatus === 3">
                                                            <p class="mb-0 text-success d-flex justify-content-start align-items-center">
                                                                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                                     width="18" viewbox="0 0 24 24" fill="none">
                                                                    <circle cx="12" cy="12" r="8"
                                                                            fill="#f42b3d"></circle>
                                                                </svg>
                                                                已完成
                                                            </p>
                                                        </div>
                                                        <div v-if="order_i.orderStatus === 7">
                                                            <p class="mb-0 text-danger d-flex justify-content-start align-items-center">
                                                                <svg class="mr-2" xmlns="http://www.w3.org/2000/svg"
                                                                     width="18" viewbox="0 0 24 24" fill="none">
                                                                    <circle cx="12" cy="12" r="8"
                                                                            fill="#f42b3d"></circle>
                                                                </svg>
                                                                中断
                                                            </p>
                                                        </div>
                                                    </td>
                                                    <td class="text-right">￥^{ order_i.orderBudget }</td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Wrapper End-->
<footer class="iq-footer">
</footer> <!-- Backend Bundle JavaScript -->
<script src="/static/js/backend-bundle.min.js"></script>
<!-- Chart Custom JavaScript -->
<script src="/static/js/customizer.js"></script>

<script src="/static/js/sidebar.js"></script>

<!-- Flextree Javascript-->
<script src="/static/js/flex-tree.min.js"></script>
<script src="/static/js/tree.js"></script>

<!-- Table Treeview JavaScript -->
<script src="/static/js/table-treeview.js"></script>

<!-- SweetAlert JavaScript -->
<script src="/static/js/sweetalert.js"></script>

<!-- Vectoe Map JavaScript -->
<script src="/static/js/vector-map-custom.js"></script>

<!-- Chart Custom JavaScript -->
<script src="/static/js/chart-custom.js"></script>
<script src="/static/js/01.js"></script>
<script src="/static/js/02.js"></script>

<!-- slider JavaScript -->
<script src="/static/js/slider.js"></script>

<!-- Emoji picker -->
<script src="/static/js/index.js" type="module"></script>

<!-- app JavaScript -->
<script src="/static/js/app.js"></script>

<!--vue axion-->
<script src="/static/js/vue.js"></script>
<script src="/static/js/axios-0.18.0.js"></script>
<script>
    new Vue({
        delimiters: ['^{', '}'],
        el: "#app_o",
        data: {
            serviceView: {
                serviceID: 0,
                serviceName: '',
                serviceStatus: 0,
                serviceScore: 0,
                serviceAssessment: '',
                serviceBudget: 0.0
            },
            orders: [],
            order: {
                orderID: 0,
                orderName: '',
                orderStatus: 0,
                orderStartTime: '',
                orderBudget: 0.0},
            orderInput: {
                orderName: "",
                orderBudget: 0.0,
                serviceID: 0
            },
            modalStatus: 0,
            currentPage: 1,
            pageSize: 10,
            totalPages: 1,
            selectID: 0
        },
        methods: {
            getServiceInformation() {
                const queryParams = new URLSearchParams(window.location.search);
                const serviceID = queryParams.get('serviceID');

                if (serviceID) {
                    var _this = this;
                    axios.get(`/serviceInfo?serviceID=${serviceID}`)
                        .then(response => {
                            console.log(response.data);
                            _this.serviceView = response.data.date;
                            this.getOrders();
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                        });
                } else {
                    console.error('Service ID not found in query parameters.');
                }
            },
            getOrders(){
                const queryParams = new URLSearchParams(window.location.search);
                const serviceID = queryParams.get('serviceID');
                if (serviceID) {
                    var _this = this;
                    axios.get(`/ordersList?serviceID=${serviceID}`)
                        .then(response => {
                            console.log(response.data);
                            _this.orders = response.data.date;
                        })
                        .catch(error => {
                            console.error('Error fetching data:', error);
                        });
                }else {
                    console.error('Service ID not found in query parameters.');
                }
            },
            submit() {
                this.orderInput.serviceID = this.serviceView.serviceID;
                this.orderInput.orderBudget = parseFloat(this.orderInput.orderBudget);
                var _this = this;
                axios.post('/ordersSubmit', _this.orderInput)
                    .then(response => {
                        console.log(response.data);
                        _this.orders = response.data.date;
                        alert("添加成功");
                        _this.getServiceInformation();
                    })
                    .catch(error => {
                        console.error('Error fetching data:', error);
                    });
            }
        },
        mounted() {
            this.getServiceInformation();

        }
    });
</script>
</body>
</html>
